<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">

	<h:head>

	</h:head>
	<body>

		<h:form>
			<h:outputStylesheet>
        .bdc {
        background-color: gray;
        }
    </h:outputStylesheet>
			<h1>Venue</h1>
			<h:panelGrid columns="2" border="2" color="black">
				<h:outputText value="Period:" />
				<h:selectOneMenu value="#{venueService.period}" required="true">
					<f:selectItem itemLabel="Morning" itemValue="1" />
					<f:selectItem itemLabel="Afternoon" itemValue="2" />
					<f:selectItem itemLabel="Evening" itemValue="3" />
				</h:selectOneMenu>
				<h:outputText value="Date:" />
				<rich:calendar mode="ajax" boundaryDatesMode="scroll"
					datePattern="dd/MM/yyyy" required="true"
					dataModel="#{calendarModel}" value="#{venueService.date}">
					<f:ajax event="change" render="dt" />
				</rich:calendar>
			</h:panelGrid>

			<h:panelGroup id="dt">
				<h:outputText value="Application History"
					rendered="#{booking.display}" />

				<h:dataTable value="#{booking.booking}" var="b" border="1"
					rendered="#{booking.display}">

					<h:column id="venue">
						<h:outputText value="#{b.bookVenus}" />
						<f:facet name="header">
							<h:outputText value="Venue" />
						</f:facet>
					</h:column>

					<h:column id="datetime">
						<h:outputText value="#{b.BookDateTimeDesc()}" />
						<f:facet name="header">
							<h:outputText value="Datetime and Section" />
						</f:facet>
					</h:column>

				</h:dataTable>

			</h:panelGroup>
			<h:dataTable value="#{venueService.venuelist}" var="v" border="1">
				<h:column id="code">
					<h:outputText value="#{v.code}" />
					<f:facet name="header">
						<h:outputText value="Code" />
					</f:facet>
				</h:column>

				<h:column id="name">
					<h:outputText value="#{v.name}" />
					<f:facet name="header">
						<h:outputText value="Name" />
					</f:facet>
				</h:column>

				<h:column id="area">
					<h:outputText value="#{v.area}" />
					<f:facet name="header">
						<h:outputText value="Area (m^2)" />
					</f:facet>
				</h:column>

				<h:column id="capacity">
					<h:outputText value="#{v.capacity}" />
					<f:facet name="header">
						<h:outputText value="Capacity" />
					</f:facet>
				</h:column>

				<h:column id="action">
					<h:commandButton action="edit" value="Edit">
						<f:setPropertyActionListener target="#{venue.code}"
							value="#{v.code}" />
					</h:commandButton>
					<h:commandButton action="book" value="Book">
						<f:setPropertyActionListener target="#{venue.code}"
							value="#{v.code}" />
						<f:setPropertyActionListener
							target="#{bookingDetail.bookDatePart}"
							value="#{venueService.period}" />
						<f:setPropertyActionListener target="#{bookingDetail.bookDate}"
							value="#{venueService.calendar}" />
					</h:commandButton>

					<f:facet name="header">
						<h:outputText value="Action" />
					</f:facet>
				</h:column>
			</h:dataTable>

			<!--h:commandButton value="Add New" action="add">
			<f:setPropertyActionListener target="#{venue.newrec}" value="#{true}" />
		</h:commandButton-->
			<h:commandButton value="Refresh">
				<f:ajax event="click" render="dt" />
			</h:commandButton>
		</h:form>
	</body>
</ui:composition>